<template>
	<div class="head center cfff posf" :class="colorType == 0 ? 'bfff' : 'btheme'">
		<img
			src="@/assets/image/index/logo3.png"
			alt="logo"
			@click="onToRouter"
			:class="[colorType == 1 ? 'logo1' : 'logo2']"
		/>
		<div class="name" :style="[colorType == 1 ? '' : 'color: #1a1a1a']" @click="onToRouter">知识管理平台</div>
		<div class="nav">
			<el-menu :default-active="activeIndex" class="el-menu-left flex sss" mode="horizontal" router>
				<template v-if="isHouTai">
					<el-menu-item :index="item.children[0].path" v-for="(item, index) in menuList" :key="item.id">
						<div class="center">
							<i
								class="iconfont f16 mr15 icon-fenghuangxiangmutubiao_quanxian"
								:class="[['icon-fenghuangxiangmutubiao_quanxian', '', 'icon-moban'][index]]"
							></i>
							{{ item.title }}
						</div>
					</el-menu-item>
				</template>
				<template v-else>
					<el-menu-item index="/">首页</el-menu-item>
					<el-menu-item index="/knowledge">主题知识库</el-menu-item>
					<el-menu-item
						v-if="(limits || []).at(-1)"
						:index="`/video?name=${limits.at(-1).name}&id=${limits.at(-1).id}`"
					>
						{{ limits.at(-1).name }}
					</el-menu-item>
					<el-menu-item
						:index="`/knowledgeList?name=${item.name}&id=${item.id}`"
						v-for="(item, index) in limits"
						v-show="item && item.status == 1"
						:key="index"
					>
						<span class="menu-item">{{ item.name }}</span>
					</el-menu-item>

					<el-menu-item index="/personHome" v-if="settingStore.isMobile">个人中心</el-menu-item>
					<el-menu-item :index="houTaiPath" v-if="settingStore.isMobile">后台管理 </el-menu-item>
				</template>
			</el-menu>
		</div>
		<el-menu :ellipsis="false" :default-active="activeIndex" class="el-menu-right" mode="horizontal" router>
			<el-menu-item index="/personHome" v-if="!settingStore.isMobile">个人中心</el-menu-item>
			<el-menu-item :index="houTaiPath" v-if="!settingStore.isMobile">
				<div v-if="menuList.length">后台管理</div>
			</el-menu-item>
			<el-menu-item>
				<el-popover placement="top" :width="82" :offset="21">
					<div class="popover">
						<div @click="onToUser">个人信息</div>
						<div class="popover-item" @click="onToSubscribe">我的订阅</div>
						<div class="popover-item" @click="onToCollect">我的收藏</div>
						<div class="popover-item" @click="onToPassword">密码设置</div>
						<div @click="onToTui">退出登录</div>
					</div>
					<template #reference>
						<div class="center" @click="visible = true">
							<div class="box-img" v-if="userInfo.avatar">
								<img :src="userInfo.avatar" class="touXiang bor50" alt="" />
							</div>
							<div class="box-img" v-else>
								<img src="@/assets/image/index/user.jpg" class="touXiang bor50" alt="" />
							</div>
							<div class="f16 realName">{{ userInfo.realName }}</div>
							<el-icon color="#ffffff" class="f18">
								<ArrowDown />
							</el-icon>
						</div>
					</template>
				</el-popover>
			</el-menu-item>
		</el-menu>

		<div class="mobile-btn" @click="mobileNavVisible = true"></div>
	</div>
	<div class="head"></div>

	<el-drawer v-model="mobileNavVisible" append-to-body size="70%" direction="ltr" :with-header="false">
		<el-menu class="mobile-nav" :default-active="activeIndex" router>
			<template v-if="isHouTai">
				<el-menu-item :index="item.children[0].path" v-for="(item, index) in menuList" :key="item.id">
					<div class="center">
						<i class="iconfont f16 mr15 icon-fenghuangxiangmutubiao_quanxian" v-if="index == 0"></i>
						<i class="iconfont f16 mr15" v-else-if="index == 1">&#xeb8f; </i>
						<i class="iconfont f16 mr15 icon-moban" v-else-if="index == 2"></i>
						{{ item.title }}
					</div>
				</el-menu-item>
			</template>
			<template v-else>
				<el-menu-item index="/">首页</el-menu-item>
				<el-menu-item index="/knowledge">主题知识库</el-menu-item>
				<el-menu-item
					v-if="limits && limits.length"
					:index="`/video?name=${limits[limits.length - 1].name}&id=${limits[limits.length - 1].id}`"
					>{{ limits[limits.length - 1].name }}</el-menu-item
				>
				<el-menu-item
					:index="`/knowledgeList?name=${item.name}&id=${item.id}`"
					v-for="(item, index) in limits"
					v-show="item && item.status == 1"
					:key="index"
					>{{ item.name }}</el-menu-item
				>

				<!-- <el-menu-item index="/gongCheng">企业工程技术资料库</el-menu-item> -->
				<el-menu-item index="/personHome" v-if="settingStore.isMobile">个人中心</el-menu-item>
				<el-menu-item :index="houTaiPath" v-if="settingStore.isMobile">后台管理</el-menu-item>
			</template>
		</el-menu>
	</el-drawer>
</template>
<!-- <el-menu-item :index="`/gongCheng?id=${item.id}`" v-for="(item, index) in limits" :key="index">{{
	item.name
}}</el-menu-item> -->
<script setup>
import { useSettingStores } from "@/store/settings"
import { useMenuStore } from "/store/menu"
import { useUserInfoStore } from "/store/userInfo"
const settingStore = useSettingStores()
const router = useRouter()
const menuList = ref([])
const userInfo = ref({})
const props = defineProps({
	activeIndex: {
		type: String,
		default: "/",
	},
	isHouTai: {
		type: Boolean,
		default: false,
	},
	colorType: {
		type: [String, Number],
		default: "0", //0白色 1蓝色
	},
})
const houTaiPath = ref("")
const mobileNavVisible = ref(false)
const visible = ref(false)
const limits = ref([])
// 获取title的权限并展示
async function created() {
	//个人信息
	const user = await getAxios("/system/sysUser/personInfo")
	if (user) {
		userInfo.value = user
	}
	const res = await getAxios("/knowledge/kbSubjectWarehouse/showList")
	if (res) {
		limits.value = [...res]
	}
}
created()
//路由

async function list() {
	menuList.value = await useMenuStore().getMenu(true)
	houTaiPath.value = menuList.value.length ? menuList.value[0].children[0].path : "/organizationalPermissions"
}
list()
window.onReload("head", () => {
	list()
})
const onToRouter = () => {
	router.push("/")
}
const onToUser = () => {
	router.push("/personSetUp")
	visible.value = false
}
const onToSubscribe = () => {
	router.push("/personSubscribe")
	visible.value = false
}
const onToCollect = () => {
	router.push("/personCollect")
	visible.value = false
}
const onToPassword = () => {
	router.push("personPassword")
	visible.value = false
}
const onToTui = () => {
	const userInfoStore = useUserInfoStore()
	userInfoStore.logout()
}
window.onReload("organizational", () => {
	list()
})
</script>
<style lang="scss" scoped>
.name {
	margin-right: 40px;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	@media (max-width: 768px) {
		display: none;
	}
}
.head {
	width: 100%;
	height: 80px;
	padding: 0 20px 0 40px;
	// top: 0;
	// left: 0;
	z-index: 9;
	@media (max-width: 900px) {
		padding-left: 2vw;
		padding-right: 0;
	}
	@media (max-width: 575px) {
		justify-content: flex-start;
	}
	&.posf {
		z-index: 100;
	}
	.nav {
		padding-right: 20px;
		margin-right: 20px;
		flex: 1;
		position: relative;
		overflow: hidden;

		@media (max-width: 575px) {
			display: none;
		}

		&::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			width: 1px;
			height: 50%;
			background: #fff;
			margin: auto;
		}
		.sss {
			overflow-x: auto;
			width: 100%;
		}
	}
	.xiaoXi {
		display: block;
	}

	.touXiang {
		width: 30px;
		height: 30px;
		margin-right: 15px;
	}

	:deep(.el-menu--horizontal > .el-menu-item) {
		height: auto;
		font-size: 16px;
		color: #ffffff;
		background-color: #2972fa;
	}

	:deep(.el-menu--horizontal > .el-menu-item.is-active) {
		border-bottom: 1px solid #ffffff;
		color: #ffffff !important;
	}

	:deep(.el-menu--horizontal) {
		border-bottom: 0;
	}

	:deep(.el-menu-item) {
		margin: 0 20px 0 0;
		padding: 0;
	}
	.menu-item {
		text-align: center;
		max-width: 80px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	:deep(.el-menu-item:hover) {
		border-bottom: 1px solid #ffffff;
		color: #ffffff !important;
		background: inherit;
	}

	:deep(.el-menu) {
		background-color: inherit;
		height: 100%;
	}

	.logo1 {
		cursor: pointer;
		width: 70px;
		margin-right: 20px;
		filter: brightness(100);
		@media (max-width: 768px) {
			display: none;
		}
	}
	.logo2 {
		cursor: pointer;
		width: 70px;
		margin-right: 20px;
		// filter: brightness(100);
		@media (max-width: 768px) {
			display: none;
		}
	}
	.box-img {
		display: flex;
	}
}
:deep(.el-sub-menu__icon-more) {
	color: #fff;
}
.bfff {
	:deep(.el-menu--horizontal > .el-menu-item) {
		color: #666666;
		background-color: #fff;
	}
	:deep(.el-sub-menu__icon-more) {
		color: #000;
	}
	:deep(.el-menu--horizontal > .el-menu-item.is-active) {
		border-bottom: 1px solid #2972fa;
		color: #2972fa !important;
		padding: 10px 0;
	}

	:deep(.el-menu-item:hover) {
		border-bottom: 1px solid #2972fa;
		color: #2972fa !important;
	}
}
:deep(.el-popper .is-light) {
	margin-left: 20px;
}
.popover {
	font-size: 14px;
	cursor: pointer;
	.popover-item {
		margin: 10px 0;
	}
}

.realName {
	@media (max-width: 768px) {
		display: none;
	}
}

.mobile-btn {
	width: 40px;
	height: 20px;
	position: relative;
	flex: none;
	margin-left: auto;
	@media (min-width: 576px) {
		display: none;
	}
	&::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 50%;
		height: 50%;
		border-block: 2px solid #ccc;
	}
}
.mobile-nav {
	border: 0;
}
</style>
